<template>
  <div class="hello">
	  <div class="block">
			<input type="text" v-model="obj.name">
			<input type="text" v-model="obj.age">
		</div>
    <div>{{methodsNow()}}</div>
    <div>{{computedNow}}</div>
    <div>{{methodsNow()}}</div>
    <div>{{computedNow}}</div>
		<h3 @click="changeArrFirst">点击我看$nextTick</h3>
		<p>{{arrList}}</p>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
     obj:{
			name:'aayy',
			age:12
		 },
		 name:'aaa',
          num:0,
		 arrList:[1,2,3,4,5]
    }
  },
	mounted(){
	},
	methods:{
	   methodsNow: function () {
        console.log('methods')
				return this.obj.name;
      },
		add:function(){
				this.num ++
		},
	  changeName:function(){
				this.name = this.name+'a'
		},
		changeArrFirst(){
		  this.$set(this.arrList,0,3444); //正确写法
		}
	},
	watch:{
	  'obj.name': function(val,val1) {
        //alert(val);
     }
	},
	computed:{
		showName:function(){
					 //alert('showName执行了')
					 return this.name
			 },
		 computedNow: function () {
        //console.log('computed');
				return this.obj.age;
      }
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
